<template>
   <div>
     <h1>vuex网络版购物车</h1>
     <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in shopcartList" :key="item._id">
                <td><input type="checkbox" v-model="item.checked"></td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="changeNum(item._id,-1)">-</button>
                    {{item.num}}
                    <button @click="changeNum(item._id,1)">+</button>
                </td>
                <td>
                    {{item.num*item.price}}
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">{{getTotal}}</td>
            </tr>
        </tfoot>
     </table>
   </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapActions,mapState,mapGetters}=createNamespacedHelpers('shopcartKey')
export default {
    methods:{
        ...mapActions(['getShopCartList','changeNumAsync']),
        changeNum(_id,n){
            this.changeNumAsync({_id,n})
        }
    },
    computed:{
        ...mapGetters(['getTotal']),
        ...mapState(['shopcartList'])
    },
    created(){
        //向vuex发送actions
        this.getShopCartList()
    }
}
</script>

<style>

</style>